<%--
  Created by IntelliJ IDEA.
  User: 飞蓬
  Date: 2017/8/13
  Time: 14:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <base href="<%=basePath%>">
    <!-- jsp文件头和头部 -->
    <jsp:include page="../js_top.jsp"/>
    <link href="<%=basePath%>/static/css/css.css" rel="stylesheet" type="text/css" />
    <style>
        /* 分页ul中的li样式 */
        .pagination ul{margin:2px 10px 0;list-style:none; /* 去掉ul前面的符号 */}
        .pagination ul li{float:left; /* 向左漂移，将竖排变为横排 */}
        .pagination ul>li>a,.pager>li>a{background:none;color:#63666d;padding:4px 8px;font-family:Arial,Verdana,"微软雅黑";font-size:14px;cursor:pointer;}
        .pagination ul>li>a:hover{background:none;}
        .pagination ul>li>a:hover,.pager>li>a:hover{color:#0fb1d6;text-decoration:underline;}
        .pagination ul input{height:23px;margin-top:1.5px;}


        .btn{margin-left:5px;width:96px;height:30px;line-height:30px;text-align:center;display:block;background-color:inherit!important;background:url(<%=basePath%>img/images/alarm_set_tab.png) no-repeat!important;color:#792a04!important;font-size:15px;font-family:'微软雅黑';float:left;padding:0;text-shadow:0 0px 0 rgba(0,0,0,0)!important;border:0 none!important;border-width:inherit;}
        .btn:hover{background-color:inherit!important;opacity:0.8;filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity:0.8;}
        label{color:#545454;font-size:14px;font-family:"微软雅黑";}
        .mms_vip_tab{width:143px;height:26px;float:right;margin:7px 13px 0 0;}
        .mms_vip_tab a{width:24px;height:24px;line-height:24px;text-align:center;display:block;float:left;background:#eff3f5;border:1px solid #9fa3a8;border-radius:5px;color:#727a85;font-size:14px;font-family:Arial,Verdana;font-weight:700;cursor:pointer;}
        .mms_vip_tab a.active,.mms_vip_tab a:hover{color:#fff;border:1px solid #596066;}
        .mms_vip_tab a:not (:last-child ){margin:0 13px 0 0;}
        .mms_vip_tab a:first-child{background:url(<%=basePath%>/static/img/images/mms_vip_icon.png) no-repeat;}
        .mms_vip_tab a:first-child:hover{background:#727a85 url(<%=basePath%>/static/img/images/mms_vip_icon1.png) no-repeat;}
        .mms_vip_tab a:nth-child(2){background:url(<%=basePath%>/static/img/images/mms_vip_icon.png) no-repeat 0px -24px;}
        .mms_vip_tab a:nth-child(2):hover{background:#727a85 url(<%=basePath%>/static/img/images/mms_vip_icon1.png) no-repeat 0px -24px;}
        .mms_vip_tab a:nth-child(3){background:url(<%=basePath%>/static/img/images/mms_vip_icon.png) no-repeat 0px -48px;}
        .mms_vip_tab a:nth-child(3):hover{background:#727a85 url(<%=basePath%>/static/img/images/mms_vip_icon1.png) no-repeat 0px -48px;}
        .mms_vip_tab a:last-child{background:url(<%=basePath%>/static/img/images/menu_sys.png) no-repeat 0px 0px;}
        .mms_vip_tab a:last-child:hover{background:#727a85 url(<%=basePath%>/static/img/images/menu_sys.png) no-repeat 0px -24px;}
        .mms_vip_tab a:not(:last-child){margin:0 13px 0 0;}
        .pagination ul{margin:2px 10px 0;}
        .pagination ul>li>a,.pager>li>a{background:none;color:#63666d;padding:4px 8px;font-family:Arial,Verdana,"微软雅黑";font-size:14px;cursor:pointer;}
        .pagination ul>li>a:hover{background:none;}
        .pagination ul>li>a:hover,.pager>li>a:hover{color:#0fb1d6;text-decoration:underline;}
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <!-- 检索  -->
            <form action="sys/sysRole/pageList.do" method="post" name="form1" id="form1">
                <div style="float: left;">
                    <%-- <table style="margin: 20px 0px 10px 0px;">
                        <tr>
                            <td><label style="line-height:31px;">角色名称</label></td>
                            <td><input style="width: 130px;height:20px;margin-bottom:0px;"  type="text" placeholder="请输入角色名称" name="roleName" value="${sysRole.roleName}"  /></td>
                            <td style="vertical-align: top;">
                                <button style="margin-left:5px;"  type="button" class="btn  btn-mini btn-info " onclick="search();">查询</button>
                            </td>
                        </tr>
                    </table> --%>
                    <div class="alarm_set_tab" style="margin-top: 20px">
                        <span >角色名称</span>
                        <input type="text" name="roleName" value="${sysRole.roleName}" style="width: 130px; " placeholder="请输入角色名称..." >
                        <a href="javascript:search();" style="margin-left: 10px;">查询</a>
                    </div>
                </div>

                <div style="width:100%;clear: both;">
                    <div style="margin-top:10px;font-size: 18px;font-family: 微软雅黑, 宋体, 黑体;background:url(/static/img/images/right_main_tab1.png) repeat-x center bottom;width:100%;height:51px;border-radius: 5px 5px 0px 0px;border:1px solid #c4cdd8;border-bottom:0px solid #FFFFFF;">
                        <span style="line-height:51px; margin-left:15px;">角色管理</span>
                        <div class="mms_vip_tab" style="margin-top:13px;">
                            <a title="新增" onclick="add();"></a>
                            <a title="删除" onclick="del();"></a>
                            <a title="编辑" onclick="edit();"></a>
                            <a title="菜单权限" onclick="editMenus();"></a>
                        </div>
                    </div>
                    <div style="width:100%; border:1px solid #c4cdd8;">
                        <!-- 检索  -->
                        <table class="table  table-bordered table-hover"  style="width:1565px; margin:10px auto;">
                            <thead>
                            <tr>
                                <th>角色名称</th>
                                <th>角色描述</th>
                            </tr>
                            </thead>
                            <tbody>
                            <!-- 开始循环 -->
                            <c:choose>
                                <c:when test="${not empty page.result}">
                                    <c:forEach items="${page.result}" var="sysRole" varStatus="vs" >
                                        <!--<tr <c:if test="${vs.count%2==1 }"> class="info"</c:if>>  -->
                                        <tr id="tr${vs.count}"  onclick="trOnclick('tr${vs.count}','${sysRole.roleId}','${sysRole.roleName}','${sysRole.creatorId}');" >
                                            <td>${sysRole.roleName}</td>
                                            <td>${sysRole.descriptor}</td>
                                        </tr>
                                    </c:forEach>
                                </c:when>
                                <c:when test="${empty padPage.result}">
                                    <tr>
                                        <td colspan="5" style="color: red;">暂无数据!</td>
                                    </tr>
                                </c:when>
                            </c:choose>

                            </tbody>
                        </table>
                        <table style="width:100%;height: 34px;border-top:1px solid rgb(196, 205, 216);background:url(<%=basePath%>img/sys/thbg.png);">
                            <tr>
                                <td>
                                    <div class="pagination"
                                         style="float: right; padding-top: 0px; margin: 0px;height: 34px;">
                                        ${page.pageStrLess}
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>
<script type="text/javascript">

    sysUserId = '${sysUser.userId}';

    //鼠标点过高亮取到相关数据
    var tempClassId = "";
    var tridClick = "";
    var idClick = "";
    var nameClick = "";
    var userIdClick = "";
    function trOnclick(tridTemp,idTemp,nameTemp,userIdTemp){
        tridClick = tridTemp;
        idClick = idTemp;
        nameClick = nameTemp;
        userIdClick = userIdTemp;
        $("#"+tridTemp).attr("class","info");
        if(tempClassId!="" && tempClassId!=tridTemp){
            $("#"+tempClassId).attr("class","");
        }
        tempClassId = tridTemp;
    }

    //检索
    function search() {
        //top.jzts();
        $("#form1").submit();
    }
    //新增
    function add(){
        var diag = new top.Dialog();
        diag.Title ="新增";
        diag.URL = '<%=basePath%>sys/sysRole/edit.do';
        diag.Width = 580;
        diag.Height = 200;
        diag.CancelEvent = function(){ //关闭事件
            if('${page.currentPage}' == '0'){
                setTimeout("self.location=self.location",100);
            }else{
                nextPage('${page.currentPage}');
            }
            diag.close();
        };
        diag.show();
    }
    //修改
    function edit(){
        if(idClick==""){
            layer.msg('<span style="color:white;font-family:微软雅黑;">请选择记录后再进行操作!</span>');
            return false;
        }
        if(sysUserId != 1 && userIdClick!=sysUserId){
            layer.msg('<span style="color:white;font-family:微软雅黑;">非超级用户只能对自己新增的角色进行操作!</span>');
            return false;
        }
        var id= idClick;
        var diag = new top.Dialog();
        diag.Title ="编辑";
        diag.URL = '<%=basePath%>sys/sysRole/edit.do?id='+id;
        diag.Width = 580;
        diag.Height = 200;
        diag.CancelEvent = function(){ //关闭事件
            nextPage('${page.currentPage}');
            diag.close();
        };
        diag.show();
    }


    //删除
    function del(){
        if(idClick==""){
            layer.msg('<span style="color:white;font-family:微软雅黑;">请选择记录后再进行操作!</span>');
            return false;
        }

        var id = idClick;
        var msg = nameClick;
        layer.confirm("确定要删除["+msg+"]吗?", {
            btn: ['确定','取消'] //按钮
        }, function(){
            var url = '<%=basePath%>sys/sysRole/delete.do?id='+id;
            $.get(url,function(data){
                nextPage('${page.currentPage}');
            });
        });
    }

    //菜单权限
    function editMenus(){
        if(idClick==""){
            layer.msg('<span style="color:white;font-family:微软雅黑;">请选择记录后再进行操作!</span>');
            return false;
        }
        var  roleId = idClick;
        var diag = new top.Dialog();
        diag.Drag = true;
        diag.Title = "菜单权限";
        diag.URL = '<%=basePath%>sys/sysRole/sysRoleMenuEdit.do?roleId='+roleId;
        diag.Width = 580;
        diag.Height = 370;
        diag.CancelEvent = function(){ //关闭事件
            diag.close();
        };
        diag.show();
    }

    window.onload=function (){
        var _w=$('.row-fluid').width();
        $('.row-fluid table.table-hover').css('width', _w-15+'px');
    }
    window.onresize=function(){
        var _w=$('.row-fluid').width();
        $('.row-fluid table.table-hover').css('width', _w-15+'px');
    };
</script>
</body>
</html>
